import { useMemo, memo, forwardRef } from 'react'
import {Progress} from 'antd'
import './index.scss'
const MakeLoading = forwardRef((props: any, ref: any) => {
    const { percent = 0 } = props
    const tips = useMemo(() => {
        return percent < 99 ? "刻录制作中,请不要移动文件" : "合成完成，正在存储中"
    }, [percent])
    return (
        <>
            <div className="make-loading">
                <div className="container">
                    {
                        percent < 100 ?
                            <Progress type="circle" percent={percent} strokeWidth={8} />
                            :
                            <img src="../../../../assets/network/ok.png" alt="" draggable={false} />
                    }
                    <div className="tip">
                        {tips}
                    </div>
                </div>
            </div>
        </>
    )
})
export default memo(MakeLoading)